<template>
  <div class="bank-financing-system">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-left">
        <div class="logo">
          <i class="fas fa-university"></i>
          <span class="logo-text">银行融资管理系统</span>
        </div>
      </div>
      <div class="nav-center">
        <div class="nav-menu">
          <div 
            class="nav-item" 
            :class="{ active: currentView === 'products' }"
            @click="currentView = 'products'"
          >
            <i class="fas fa-box"></i>
            <span>产品管理</span>
          </div>
          <div 
            class="nav-item" 
            :class="{ active: currentView === 'applications' }"
            @click="currentView = 'applications'"
          >
            <i class="fas fa-file-alt"></i>
            <span>申请审核</span>
          </div>
          <div class="nav-item" @click="loginOut">
            <i class="fas fa-sign-out-alt"></i>
            <span>退出登录</span>
          </div>
        </div>
      </div>
      <div class="nav-right">
        <button class="btn-notification">
          <i class="fas fa-bell"></i>
          <span class="notification-badge" v-if="unreadNotifications > 0">
            {{ unreadNotifications }}
          </span>
        </button>
        <div class="user-info">
          <el-dropdown>
            <div class="user-dropdown">
              <div class="user-avatar">
                <i class="fas fa-user-shield"></i>
              </div>
              <div class="user-details">
                <div class="user-name">银行管理员</div>
                <div class="user-role">融资业务部</div>
              </div>
              <i class="fas fa-chevron-down dropdown-arrow"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <i class="fas fa-user"></i>
                  个人信息
                </el-dropdown-item>
                <el-dropdown-item>
                  <i class="fas fa-cog"></i>
                  账户设置
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 产品管理页面 -->
      <div v-if="currentView === 'products'" class="product-management">
        <!-- 页面标题和操作栏 -->
        <div class="page-header">
          <div class="header-left">
            <h2>融资产品管理</h2>
            <p class="page-description">管理银行发布的融资产品，包括信用贷、抵押贷、担保贷等</p>
          </div>
          <el-button type="primary" @click="showAddProductDialog">
            <i class="fas fa-plus"></i> 发布新产品
          </el-button>
        </div>

        <!-- 产品筛选 -->
        <div class="filter-section">
          <el-form :model="filterForm" inline>
            <el-form-item label="产品类型">
              <el-select v-model="filterForm.productType" placeholder="全部类型" clearable>
                <el-option label="信用贷" value="1" />
                <el-option label="抵押贷" value="2" />
                <el-option label="担保贷" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="产品状态">
              <el-select v-model="filterForm.status" placeholder="全部状态" clearable>
                <el-option label="上架" value="1" />
                <el-option label="下架" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadProducts">查询</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 产品列表 -->
        <div class="product-list">
          <el-table :data="productList" v-loading="loading">
            <el-table-column prop="productCode" label="产品编码" width="120" />
            <el-table-column prop="productName" label="产品名称" min-width="150" />
            <el-table-column prop="productType" label="产品类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getProductTypeTag(row.productType)">
                  {{ getProductTypeText(row.productType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="interestRate" label="利率" width="100">
              <template #default="{ row }">
                {{ (row.interestRate * 100).toFixed(2) }}%
              </template>
            </el-table-column>
            <el-table-column prop="amountRange" label="贷款金额" width="180">
              <template #default="{ row }">
                {{ formatAmount(row.minAmount) }} - {{ formatAmount(row.maxAmount) }}
              </template>
            </el-table-column>
            <el-table-column prop="termRange" label="贷款期限" width="120" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-switch
                  v-model="row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateProductStatus(row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="editProduct(row)">编辑</el-button>
                <el-button size="small" type="primary" @click="viewProduct(row)">查看</el-button>
                <el-button size="small" type="danger" @click="deleteProduct(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-section">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :total="pagination.total"
            @current-change="loadProducts"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100]"
          />
        </div>
      </div>

      <!-- 申请审核页面 -->
      <div v-else class="application-review">
        <!-- 页面标题 -->
        <div class="page-header">
          <div class="header-left">
            <h2>融资申请审核</h2>
            <p class="page-description">审核农户提交的融资申请，包括单独融资和联合融资</p>
          </div>
          <div class="header-stats">
            <div class="stat-badge pending">
              <span class="stat-count">{{ pendingCount }}</span>
              <span class="stat-label">待审核</span>
            </div>
            <div class="stat-badge total">
              <span class="stat-count">{{ totalCount }}</span>
              <span class="stat-label">总申请</span>
            </div>
          </div>
        </div>

        <!-- 申请筛选 -->
        <div class="filter-section">
          <el-form :model="applicationFilter" inline>
            <el-form-item label="申请类型">
              <el-select v-model="applicationFilter.applicationType" placeholder="全部类型" clearable>
                <el-option label="单独融资" value="single" />
                <el-option label="联合融资" value="joint" />
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select v-model="applicationFilter.status" placeholder="全部状态" clearable>
                <el-option label="待审核" value="pending" />
                <el-option label="审核通过" value="approved" />
                <el-option label="审核拒绝" value="rejected" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadApplications">查询</el-button>
              <el-button @click="resetApplicationFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 申请列表 -->
        <div class="application-list">
          <el-table :data="applicationList" v-loading="applicationLoading">
            <el-table-column prop="applicationNo" label="申请编号" width="140" />
            <el-table-column prop="farmerName" label="申请人" width="120" />
            <el-table-column prop="applicationType" label="申请类型" width="100">
              <template #default="{ row }">
                <el-tag :type="row.applicationType === 'single' ? 'primary' : 'success'">
                  {{ row.applicationType === 'single' ? '单独融资' : '联合融资' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="融资产品" min-width="150" />
            <el-table-column prop="applyAmount" label="申请金额" width="120">
              <template #default="{ row }">
                {{ formatAmount(row.applyAmount) }}
              </template>
            </el-table-column>
            <el-table-column prop="applyTerm" label="申请期限" width="100">
              <template #default="{ row }">
                {{ row.applyTerm }}个月
              </template>
            </el-table-column>
            <el-table-column prop="status" label="审核状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusTag(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" width="180" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button 
                  size="small" 
                  type="primary" 
                  @click="reviewApplication(row)"
                  :disabled="row.status !== 'pending'"
                >
                  审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-section">
          <el-pagination
            v-model:current-page="applicationPagination.current"
            v-model:page-size="applicationPagination.size"
            :total="applicationPagination.total"
            @current-change="loadApplications"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100]"
          />
        </div>
      </div>
    </div>

    <!-- 添加/编辑产品弹窗 -->
    <el-dialog
      v-model="productDialog.visible"
      :title="productDialog.isEdit ? '编辑融资产品' : '发布融资产品'"
      width="800px"
    >
      <el-form :model="productForm" :rules="productRules" ref="productFormRef" label-width="120px">
        <el-form-item label="产品编码" prop="productCode">
          <el-input v-model="productForm.productCode" placeholder="请输入产品编码" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="productForm.productName" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-select v-model="productForm.productType" placeholder="请选择产品类型">
            <el-option label="信用贷" value="1" />
            <el-option label="抵押贷" value="2" />
            <el-option label="担保贷" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="利率" prop="interestRate">
          <el-input-number
            v-model="productForm.interestRate"
            :precision="4"
            :step="0.0001"
            :min="0.0001"
            :max="1"
          />
          <span class="input-append">% (输入小数形式，如0.05表示5%)</span>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最低贷款金额" prop="minAmount">
              <el-input-number
                v-model="productForm.minAmount"
                :precision="2"
                :min="0"
                :step="1000"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高贷款金额" prop="maxAmount">
              <el-input-number
                v-model="productForm.maxAmount"
                :precision="2"
                :min="productForm.minAmount"
                :step="1000"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="贷款期限" prop="termRange">
          <el-input v-model="productForm.termRange" placeholder="例如：3-36个月" />
        </el-form-item>
        <el-form-item label="适用农产品">
          <el-input
            v-model="productForm.applicableCrops"
            type="textarea"
            :rows="3"
            placeholder="请输入适用的农产品类型，多个用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="产品描述">
          <el-input
            v-model="productForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入产品详细描述"
          />
        </el-form-item>
        <el-form-item label="申请条件">
          <el-input
            v-model="productForm.requirements"
            type="textarea"
            :rows="3"
            placeholder="请输入申请条件"
          />
        </el-form-item>
        <el-form-item label="申请流程">
          <el-input
            v-model="productForm.applicationProcess"
            type="textarea"
            :rows="3"
            placeholder="请输入申请流程"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="productDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitProduct">确定</el-button>
      </template>
    </el-dialog>

    <!-- 审核申请弹窗 -->
    <el-dialog
      v-model="reviewDialog.visible"
      title="融资申请审核"
      width="600px"
    >
      <div class="application-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请编号">{{ reviewDialog.data.applicationNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ reviewDialog.data.farmerName }}</el-descriptions-item>
          <el-descriptions-item label="申请类型">
            {{ reviewDialog.data.applicationType === 'single' ? '单独融资' : '联合融资' }}
          </el-descriptions-item>
          <el-descriptions-item label="融资产品">{{ reviewDialog.data.productName }}</el-descriptions-item>
          <el-descriptions-item label="申请金额">{{ formatAmount(reviewDialog.data.applyAmount) }}</el-descriptions-item>
          <el-descriptions-item label="申请期限">{{ reviewDialog.data.applyTerm }}个月</el-descriptions-item>
          <el-descriptions-item label="申请时间" :span="2">{{ reviewDialog.data.applyTime }}</el-descriptions-item>
        </el-descriptions>

        <div class="review-section">
          <el-form :model="reviewForm" label-width="80px">
            <el-form-item label="审核结果">
              <el-radio-group v-model="reviewForm.approved">
                <el-radio :label="true">审核通过</el-radio>
                <el-radio :label="false">审核拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见" v-if="!reviewForm.approved">
              <el-input
                v-model="reviewForm.rejectReason"
                type="textarea"
                :rows="3"
                placeholder="请输入拒绝原因"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <el-button @click="reviewDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitReview">提交审核</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 未读通知
const unreadNotifications = ref(3)
const navigateTo = (destination) => {
  console.log('导航到:', destination)
  router.push(destination)
  drawer.value = false
}

// 当前视图
const currentView = ref('products')

// 产品管理相关数据
const productList = ref([])
const loading = ref(false)
const filterForm = reactive({
  productType: '',
  status: ''
})
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 申请审核相关数据
const applicationList = ref([])
const applicationLoading = ref(false)
const applicationFilter = reactive({
  applicationType: '',
  status: ''
})
const applicationPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 统计信息
const pendingCount = computed(() => {
  return applicationList.value.filter(app => app.status === 'pending').length
})

const totalCount = computed(() => {
  return applicationList.value.length
})

// 产品弹窗相关
const productDialog = reactive({
  visible: false,
  isEdit: false
})
const productFormRef = ref()
const productForm = reactive({
  productCode: '',
  productName: '',
  productType: '',
  interestRate: 0.05,
  minAmount: 0,
  maxAmount: 0,
  termRange: '',
  applicableCrops: '',
  description: '',
  requirements: '',
  applicationProcess: ''
})

// 审核弹窗相关
const reviewDialog = reactive({
  visible: false,
  data: {}
})
const reviewForm = reactive({
  approved: true,
  rejectReason: ''
})

// 表单验证规则
const productRules = {
  productCode: [
    { required: true, message: '请输入产品编码', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  productType: [
    { required: true, message: '请选择产品类型', trigger: 'change' }
  ],
  interestRate: [
    { required: true, message: '请输入利率', trigger: 'blur' }
  ],
  minAmount: [
    { required: true, message: '请输入最低贷款金额', trigger: 'blur' }
  ],
  maxAmount: [
    { required: true, message: '请输入最高贷款金额', trigger: 'blur' }
  ],
  termRange: [
    { required: true, message: '请输入贷款期限范围', trigger: 'blur' }
  ]
}

// 方法定义
const loadProducts = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    productList.value = [
      {
        id: 1,
        productCode: 'FP2024001',
        productName: '农户信用贷款',
        productType: '1',
        interestRate: 0.045,
        minAmount: 10000,
        maxAmount: 500000,
        termRange: '6-36个月',
        status: 1
      },
      {
        id: 2,
        productCode: 'FP2024002',
        productName: '农产品抵押贷款',
        productType: '2',
        interestRate: 0.038,
        minAmount: 50000,
        maxAmount: 2000000,
        termRange: '12-60个月',
        status: 1
      }
    ]
    pagination.total = productList.value.length
  } catch (error) {
    ElMessage.error('加载产品列表失败')
  } finally {
    loading.value = false
  }
}

const loadApplications = async () => {
  applicationLoading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    applicationList.value = [
      {
        id: 1,
        applicationNo: 'APP20240001',
        farmerName: '张农夫',
        applicationType: 'single',
        productName: '农户信用贷款',
        applyAmount: 50000,
        applyTerm: 24,
        status: 'pending',
        applyTime: '2024-01-20 10:30:00'
      },
      {
        id: 2,
        applicationNo: 'APP20240002',
        farmerName: '李农户',
        applicationType: 'joint',
        productName: '农产品抵押贷款',
        applyAmount: 200000,
        applyTerm: 36,
        status: 'pending',
        applyTime: '2024-01-21 14:20:00'
      }
    ]
    applicationPagination.total = applicationList.value.length
  } catch (error) {
    ElMessage.error('加载申请列表失败')
  } finally {
    applicationLoading.value = false
  }
}

const showAddProductDialog = () => {
  productDialog.visible = true
  productDialog.isEdit = false
  Object.keys(productForm).forEach(key => {
    productForm[key] = ''
  })
  productForm.interestRate = 0.05
  productForm.minAmount = 0
  productForm.maxAmount = 0
}

const editProduct = (product) => {
  productDialog.visible = true
  productDialog.isEdit = true
  Object.assign(productForm, product)
}

const viewProduct = (product) => {
  ElMessageBox.alert(`
    <div>
      <h3>${product.productName}</h3>
      <p><strong>产品编码：</strong>${product.productCode}</p>
      <p><strong>产品类型：</strong>${getProductTypeText(product.productType)}</p>
      <p><strong>利率：</strong>${(product.interestRate * 100).toFixed(2)}%</p>
      <p><strong>贷款金额：</strong>${formatAmount(product.minAmount)} - ${formatAmount(product.maxAmount)}</p>
      <p><strong>贷款期限：</strong>${product.termRange}</p>
    </div>
  `, '产品详情', {
    dangerouslyUseHTMLString: true
  })
}

const deleteProduct = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除这个融资产品吗？', '提示', {
      type: 'warning'
    })
    // 调用删除API
    ElMessage.success('删除成功')
    loadProducts()
  } catch {
    // 用户取消操作
  }
}

const updateProductStatus = async (product) => {
  try {
    // 调用更新状态API
    ElMessage.success(`${product.status === 1 ? '上架' : '下架'}成功`)
  } catch (error) {
    ElMessage.error('操作失败')
    // 恢复原状态
    product.status = product.status === 1 ? 0 : 1
  }
}

const submitProduct = async () => {
  try {
    await productFormRef.value.validate()
    // 调用添加/编辑API
    ElMessage.success(productDialog.isEdit ? '更新成功' : '发布成功')
    productDialog.visible = false
    loadProducts()
  } catch (error) {
    ElMessage.error('表单验证失败')
  }
}

const reviewApplication = (application) => {
  reviewDialog.visible = true
  reviewDialog.data = application
  reviewForm.approved = true
  reviewForm.rejectReason = ''
}

const submitReview = async () => {
  try {
    if (!reviewForm.approved && !reviewForm.rejectReason) {
      ElMessage.error('请填写拒绝原因')
      return
    }
    // 调用审核API
    ElMessage.success('审核完成')
    reviewDialog.visible = false
    loadApplications()
  } catch (error) {
    ElMessage.error('审核失败')
  }
}

const resetFilter = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  loadProducts()
}

const resetApplicationFilter = () => {
  Object.keys(applicationFilter).forEach(key => {
    applicationFilter[key] = ''
  })
  loadApplications()
}

// 工具函数
const getProductTypeText = (type) => {
  const typeMap = {
    '1': '信用贷',
    '2': '抵押贷',
    '3': '担保贷'
  }
  return typeMap[type] || '未知'
}

const getProductTypeTag = (type) => {
  const tagMap = {
    '1': 'success',
    '2': 'primary',
    '3': 'warning'
  }
  return tagMap[type] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待审核',
    'approved': '审核通过',
    'rejected': '审核拒绝'
  }
  return statusMap[status] || '未知'
}

const getStatusTag = (status) => {
  const tagMap = {
    'pending': 'warning',
    'approved': 'success',
    'rejected': 'danger'
  }
  return tagMap[status] || 'info'
}

const formatAmount = (amount) => {
  return '¥' + amount.toLocaleString()
}

const switchToStatistics = () => {
  currentView.value = 'statistics'
  loadChartData()
}

//退出登录
const loginOut = ()=>{
  //弹出确认框
  ElMessageBox.confirm('你确认退出登录吗?','提示',
    {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
  ).then(async() => {//点击确认按钮
      ElMessage({
        type: 'success',
        message: '退出登录成功'
      });
      //清空本地存储
      localStorage.removeItem('loginUser');
      localStorage.removeItem('token');
      sessionStorage.clear();
      //跳转到登录页面
      router.push('/');
    }).catch(() => {//点击取消按钮
      ElMessage({
        type: 'info',
        message: '你已取消退出'
      })
    })
}

// 生命周期
onMounted(() => {
  loadProducts()
  loadApplications()
})
</script>

<style scoped>
.bank-financing-system {
  min-height: 100vh;
  background: #f5f7fa;
}

/* 顶部导航栏样式 */
.top-navbar {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
}

.logo i {
  font-size: 24px;
  color: #4CAF50;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-menu {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.nav-item.active {
  background: rgba(76, 175, 80, 0.9);
  color: white;
}

.nav-item i {
  font-size: 16px;
}

.nav-right {
  display: flex;
  align-items: center;
}

.btn-notification {
  position: relative;
  background: rgba(255,255,255,0.15);
  border: none;
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.btn-notification:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #f44336;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.user-dropdown:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.user-details {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
}

.user-role {
  font-size: 12px;
  opacity: 0.8;
}

.dropdown-arrow {
  font-size: 12px;
  opacity: 0.7;
}

/* 主内容区域 */
.main-content {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 0 8px;
}

.header-left h2 {
  color: #303133;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  color: #606266;
  margin: 0;
  font-size: 14px;
}

.header-stats {
  display: flex;
  gap: 16px;
}

.stat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  min-width: 80px;
}

.stat-badge.pending {
  background: #fff3e0;
  border: 1px solid #ffb74d;
}

.stat-badge.total {
  background: #e8f5e8;
  border: 1px solid #4CAF50;
}

.stat-count {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-badge.pending .stat-count {
  color: #f57c00;
}

.stat-badge.total .stat-count {
  color: #2e7d32;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.filter-section {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.product-list,
.application-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.input-append {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.application-detail {
  max-height: 500px;
  overflow-y: auto;
}

.review-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

:deep(.el-descriptions) {
  margin-bottom: 20px;
}

:deep(.el-table) {
  margin-bottom: 0;
}

:deep(.el-table .el-table__header) {
  background: #f8f9fa;
}

:deep(.el-table th) {
  background: #f8f9fa !important;
  font-weight: 600;
  color: #303133;
}
</style>